<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>SSlash 10x10 Black-White Chess</title>
<style>
    html, body{
        margin: 0;
        padding: 0;
    }
    body{
        width: 100vw;
        height: 100vh;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: auto;
    }

    pre, ul, input,select{
        margin: 0;
        padding: 0;
    }
    input,select{
        background-color: transparent;
        border: none;
        outline: none;
    }
    a{
        color:black;
    }
    label, .label{
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    html{
        font-size: 4vh;
    }
    body{
        margin: 0 auto;
        min-width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100vh;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
    }

    #box-game {
        width: 100%;
        height: 100%;
        background-color: #505050;
    }

    #box-game-layout {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
    }

    .top-line {
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        font-size: 1rem;
        background-color: #303030;
        color: #909090;
        text-align: center;
        border-bottom: 1px solid gray;
    }

    #ai-status {
        height: 1.5rem;
        line-height: 1.5rem;
        color: #aaaaaa;
    }

    #game-area {
        flex: 1;
        width: 100%;
        height: 100%;
        display: grid;
        justify-content: center;
        align-content: center;
        align-items: center;
        grid-gap: 1pt;
    }
    .pbox {
        background-color: dimgray;
        color: dimgray;
        cursor: pointer;
        transition: 0.5s;
        width: 5vh;
        height: 5vh;
        line-height: 5vh;
        text-align: center;
        font-size: 100%;
        display: inline-flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .pbox:hover {
        background-color: #aaaaaa;
    }
    .pbox-black, .pbox-white {
        opacity: 0.5;
        animation: pbox-frame 1.5s;
        animation-fill-mode: forwards;
        clip-path: circle(50%);
    }
    @keyframes pbox-frame {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    .pbox-black, .pbox-black:hover {
        background-color: #303030;
    }
    .pbox-white, .pbox-white:hover {
        background-color: #eeeeee;
    }
    .pbox-can-down::before {
        content: "•";
        color: darkturquoise;
    }
    .pbox-step {
        width: 80%;
        height: 80%;
        min-width: 8px;
        min-height: 8px;
        border-radius: 100%;
        color: blueviolet;
        font-size: 0.8em;
        line-height: 110%;
    }
    .pbox-step-top {
        font-weight: bold;
    }

    .game-tools {
        background-color: #505050;
        width: 100%;
        height: 6vh;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        font-size: 1rem;
        user-select: none;
    }

    .game-tool, .game-tool select {
        color: #aaaaaa;
        cursor: pointer;
    }
    .game-tool:hover {
        background-color: #707070;
        color: #f0f0f0;
        transition: 0.5s;
    }

    ux-template {
        display: none;
    }
</style>
</head>
<body>
<div id="box-game">
    <div id="box-game-layout">
        <div id="game-status" class="top-line"></div>
        <div id="ai-status" class="top-line"></div>
        <div id="game-area"></div>
        <div class="game-tools">
            <div class="game-tool">UCT:
                <select id="sel-uct-times">
                    <option ux-value="2048">2048</option>
                    <option ux-value="4096">4096</option>
                    <option ux-value="8192">8192</option>
                    <option ux-value="16384">16384</option>
                    <option ux-value="32768">32768</option>
                    <option ux-value="65536">65536</option>
                    <option ux-value="131072">131072</option>
                    <option ux-value="262144">262144</option>
                    <option ux-value="524288">524288</option>
                </select>
            </div>
            <div class="game-tool">◈
                <select id="sel-extra">
                    <option ux-value="0" param="level">Lv.0</option>
                    <option ux-value="1" param="level">Lv.1</option>
                    <option ux-value="2" param="level">Lv.2</option>
                    <option ux-value="3" param="level">Lv.3</option>
                    <option ux-value="4" param="level">Lv.4</option>
                    <option ux-value="5" param="level">Lv.5</option>
                    <option ux-value="6" param="level">Lv.6</option>
                    <option ux-value="7" param="level">Lv.7</option>
                    <option ux-value="8" param="level">Lv.8</option>
                    <option ux-value="9" param="level">Lv.9</option>
                    <option ux-value="use-local">Engine:LOCAL</option>
                    <option ux-value="use-wasm">Engine:WASM</option>
                    <option ux-value="use-js">Engine:JS</option>
                    <option ux-value="random-game">Random Game</option>
                    <option ux-value="random-game-mid">Random Game(M)</option>
                </select>
            </div>
        </div>
        <div class="game-tools">
            <div class="game-tool" id="cmd-reset">重开</div>
            <div class="game-tool"><label>AI</label></div>
            <div class="game-tool"><label><input type="checkbox" id="use-ai-black" />○</label></div>
            <div class="game-tool"><label><input type="checkbox" id="use-ai-white" />●</label></div>
            <div class="game-tool" id="cmd-load-first">▲</div>
            <div class="game-tool" id="cmd-undo">◀</div>
            <div class="game-tool" id="cmd-redo">▶</div>
            <div class="game-tool" id="cmd-load-last">▼</div>
        </div>
    </div>
</div>
<ux-template id="pbox">
    <div class="pbox" style="grid-row:[ROW]; grid-column:[COL];"><div class="pbox-step pbox-step-top"></div></div>
</ux-template>
</body>
<script>document.write(((a,b)=>(`${a}t type="module" src="./main.js?fuck=${Date.now()}">${b}t>`))("<scrip","</scrip"))</script>
</html>
